<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
</head>
<style>
  h3 {
    cursor: pointer;
  }
  ul {
    display: none;
  }
</style>
<body>

  <h3>▶ Sweeties (click me)!</h3>
  <ul>
    <li>Cake</li>
    <li>Donut</li>
    <li>Honey</li>
  </ul>

  <script>
    const h3El = document.querySelector('h3')
    const ulEl = document.querySelector('ul')

    // ▶ ▼
    let isActive = false

    h3El.onclick = function (e) {
      console.log(e)
      if (isActive) {
        h3El.textContent = '▶ Sweeties (click me)!'
        ulEl.style.display = 'none'
        isActive = false
      } else {
        h3El.textContent = '▼ Sweeties (click me)!'
        ulEl.style.display = 'block'
        isActive = true
      }
    }

  </script>
</body>
</html>